<script setup lang="ts">
import { PropType, watch } from "vue";
const
  props = defineProps({
    modelValue: { type: Object as PropType<gt.sql.user>, required: true, },
  });
function init() {

}
watch(() => props, init, { deep: true, immediate: true });
</script>
<template>
  <div class="Avatar x jc">
    <el-avatar size="large" v-if="modelValue.other.avatar" :src="modelValue.other.avatar" />
    <el-avatar size="large" class="mac-ico-customer" v-else />
    <span class="name">{{ modelValue.name }}</span>
  </div>
</template>
<style lang="scss" scoped>
.Avatar {
  position: relative;
  >.el-avatar {
    font-size: 3em;
    border: 1px solid #a5a5a5;
  }
  >.name {
    margin: 0 1em 0 0.4em;
  }
}
</style>